<template>
	<view class="container">
		<navigator url="/pages/you/index" open-type="switchTab" hover-class="other-navigator-hover">
			<button type="default" size="mini">Home</button>
		</navigator>
		<uni-swiper-dot :info="weather.data.forecast" :current="current" field="content" :mode="mode">
			<swiper class="swiper" @change="change">
				<swiper-item v-for="(item, index) in weather.data.forecast" :key="index">
					<view class="swiper-item uni-bg-red">
						<svg class="colours_icon" aria-hidden="true">
							<use :xlink:href="item.icon"></use>
						</svg>
						<view class="type">
							{{item.type}}&nbsp;&nbsp;
							{{item.low.substring(2)}} - {{item.high.substring(2)}}
						</view>
						<view class="desc">
							{{item.week}}<text v-if="index===0">(今天)</text>：{{item.fx}}{{item.fl}}；空气质量：{{handlerAqi(item.aqi)}}
						</view>
						<view class="wendu" v-if="index===0">
							{{weather.data.wendu}}°
						</view>
						<view class="wendu together" v-else v-html="time"></view>
						<view class="notice">
							{{item.notice}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	import Loading from "../../components/my/loading.vue"
	import weather from '../../mock/weather.js'
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	export default {
		data() {
			return {
				weather: {},
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				current: 0,
				mode: 'default',
				aqiMap: {
					50: '优',
					100: '良',
					150: '轻度污染',
					200: '中度污染',
					300: '重度污染',
					1000: '严重污染'
				},
				weatherMap: {
					'晴': 'iconqing',
					'阴': 'iconyintian',
					'多云': 'iconduoyun',
					'小雨': 'iconxiaoyu',
					'雨夹雪': 'iconyujiaxue-D',
					'暴雨': 'iconbaoyu',
					'晴转多云': 'iconqingduoyun',
					'中雨': 'iconzhongyu',
					'大雨': 'iconbaoyu',
					'小雪': 'iconxue',
				},
				time: ''
			}
		},
		components: {
			Loading,
			uniSwiperDot
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			handlerAqi(val) {
				let obj = this.aqiMap
				for (let key in obj) {
					if (val < key) {
						return `${val}(${obj[key]})`
					}
				}
			},
			timeElapse(date) {
				var current = Date();
				var seconds = (Date.parse(current) - Date.parse(date)) / 1000;
				var days = Math.floor(seconds / (3600 * 24));
				seconds = seconds % (3600 * 24);
				var hours = Math.floor(seconds / 3600);
				if (hours < 10) {
					hours = "0" + hours;
				}
				seconds = seconds % 3600;
				var minutes = Math.floor(seconds / 60);
				if (minutes < 10) {
					minutes = "0" + minutes;
				}
				seconds = seconds % 60;
				if (seconds < 10) {
					seconds = "0" + seconds;
				}
				var result = `
					together<br>
					<text style="color: #33ADB2; font-size: 22px;">${days}</text> 天
					<text style="color: #33ADB2; font-size: 22px;">${hours}</text> 小时
					<text style="color: #33ADB2; font-size: 22px;">${minutes}</text> 分钟
					<text style="color: #33ADB2; font-size: 22px;">${seconds}</text> 秒`;
				this.time = result
			}
		},
		mounted() {
			let arr = weather.weather.data.forecast.splice(0, 3)
			weather.weather.data.forecast = arr
			weather.weather.data.forecast.map(item => {
				item.icon = '#' + this.weatherMap[item.type]
			})
			this.weather = weather.weather

			var together = new Date();
			together.setFullYear(2020, 1, 12);
			together.setHours(15);
			together.setMinutes(0);
			together.setSeconds(0);
			together.setMilliseconds(0)
			this.timeElapse(together)
			const that = this
			// setInterval(() => {
			// 	that.timeElapse(together)
			// }, 1000)
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		box-sizing: border-box;
		background-color: #EDF9F9;
	}

	.uni-swiper__warp {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.colours_icon {
		width: 150px;
		margin-top: 40px;
	}

	.type {
		font-size: 20px;
		margin: 50px 0 15px;
	}

	.desc {
		padding: 0 60px;
		font-size: 16px;
		color: #777;
		line-height: 24px;
	}

	.wendu {
		color: #33ADB2;
		font-size: 34px;
		margin: 80px 0;
	}
	.wendu.together {
		font-size: 18px;
		line-height: 34px;
		color: #444;
	}
	.notice {
		font-size: 18px;
	}
</style>
